<template>
  <div id="box" >
    <div class="center" style="width:800px;height: 600px;border: 1px solid #ccc;border-radius:10px;">
      <h1 style="font-size: 36px;color:#f0f0f0;text-align: center;margin-top: 10px;">全家签到后台管理系统</h1>
      <Form ref="formInline" :model="formInline" :rules="ruleInline" style="width: 400px;margin: 0 auto;padding: 50px 0;">
        <FormItem prop="user" style="margin-bottom: 50px;">
          <Input type="text" v-model="formInline.user" placeholder="请输入账号">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password" style="margin-bottom: 50px;">
          <Input type="password" v-model="formInline.password" placeholder="请输入密码">
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')" :loading="loading" style="width:100%;">登录</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return{
        loading:false,
        formInline: {
          user: '',
          password: ''
        },
        ruleInline: {
          user: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      //登录跳转
      handleSubmit(name){
        this.$refs[name].validate(valid => {
          if (valid){
            this.loading=true;
            let data={
              userName:this.formInline.user,
              password:this.formInline.password,
            };
            this.$http.post('/user/login',data)
              .then(res=>{
                console.log(res.data);
                if(res.data.status ==200){
                  sessionStorage.setItem('token',res.data.data.token);
                  this.$Message.success(res.data.message);
                  this.$router.push({path: '/record'});
                  this.loading=false;
                }else{
                  this.loading=false;
                  this.$Message.error(res.data.errors.msg);
                }
              },err=>{
                console.log(err);
                this.loading=false;
                this.$Message.error("网络连接错误！");
              })
          }
        });


      }
    },

  }
</script>

<style scoped>
  #box{
    display: flex;
    height:965px;
    justify-content: center;
    align-items: center;
    background: url('../../src/assets/banner.jpg');
  }
</style>
